<template>
  <div style="min-width: 829px">
    <div v-if="$route.path == '/shopClassify'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
          <el-form-item label="分类名称:">
            <el-input style="width: 200px" v-model="paging.title"></el-input>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="select(1)" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button
            icon="el-icon-plus"
            @click="utils.goUrl(`/editClassify?title=新增分类`)"
            style="margin-left: auto"
            type="primary"
          >
            新增
          </el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column label="分类名称" prop="title"></el-table-column>
          <el-table-column prop="create_time" label="创建时间"> </el-table-column>
          <el-table-column fixed="right" width="270" label="操作">
            <template slot-scope="scope">
              <span @click="basics(scope.row)" class="tab-table-text">基础菜单</span>
              <span @click="appreciation(scope.row)" class="tab-table-text">增值服务</span>
              <span @click="setRow(1, scope.row)" class="tab-table-text">编辑</span>
              <span @click="setRow(3,scope.row)" class="tab-red-text">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>


     <el-dialog
            :title="`基础菜单`"
            :visible.sync="dialogVisible"
            width="800px"
            
            :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm" >
                <el-form-item label="名称：" prop="title" class="ruleFormInput">
                    <el-input  type="text" v-model="ruleForm.title" disabled></el-input>
                </el-form-item>
                <el-form-item label="菜单：" prop="menu_ids" class="ruleFormInput">
                  <!-- collapse-tags -->
                    <el-cascader
                        v-model="ruleForm.menu_ids"
                        :options="menuList"
                        :props="props"
                        clearable
                        ref="cascader"
                        @change="handleChange"
                        placeholder="请选择"></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false;handleClose()">取 消</el-button>
                <el-button type="primary" :loading="isBtn" @click="setAd">确 定</el-button>
            </span>
        </el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return {
      props: { multiple: true, emitPath: false, value: 'id', label: 'title', children: 'child' },
      menuList: [],
      loading: false,
      dialogVisible: false,
      ruleForm: {
        title: '',
        menu_ids: '',
        store_cate_id: '',
        id: ''
      },
       rules:{
          menu_ids:{ required: true, message: '请选择菜单', trigger: 'change' },
      },
      paging: {
        title: "",
        name: "",
        tel: "",
        page: 1,
        limit: 10,
        total: 0, //总数
      },
      tableData: [],
      isBtn: false,
    };
  },
  created() {
    this.GetList();
    this.getMenu()
  },
  methods: {
    setAd(){
        this.$refs['ruleForm'].validate(async valid => {
            if(!valid)return;
            this.isBtn = true;


            let pls = JSON.parse(JSON.stringify(this.ruleForm))
            pls.menu_ids = pls.menu_ids.join()
            
            let obj = Object.assign({},pls);
            let {code,data} = await this.$Http.setBaseMenu(obj);
            this.isBtn = false;
            if(code){
                this.$message.success((this.ruleForm.id?'修改':'添加')+"成功!");
                this.dialogVisible = false;
                this.handleClose()
                this.handleCurrentChange(1)
            }
        })
    },
    async basics(row){
        this.dialogVisible = true
        this.ruleForm.title = row.title
        this.ruleForm.store_cate_id = row.id
        let {code,data} = await this.$Http.getBaseMenu({store_cate_id: row.id});
        if(code){
            this.ruleForm.id = data.id
            if (data.menu_ids) {
                this.ruleForm.menu_ids = data.menu_ids.split(",")
            }
        }
    },
    appreciation(row){
        this.utils.goUrl(`/appreciation?id=${row.id}`);
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.GetList();
    },
     handleChange(value) {
        const checkedNodes = this.$refs.cascader.getCheckedNodes();
        const allIds = new Set();
        checkedNodes.forEach(node => {
            allIds.add(node.value)
            // 添加当前节点路径上的所有ID
            node.children.forEach(item => allIds.add(item.value));
        });
        
        // this.allSelectedIds = Array.from(allIds);
        this.ruleForm.menu_ids = Array.from(allIds)
        console.log('所有选中的ID（包含父级）:', this.ruleForm.menu_ids);
    },
    handleClose(dom){
      dom&&dom();
      this.ruleForm = this.$options.data().ruleForm;
      this.$refs['ruleForm'].resetFields();
    },
     async getMenu(){
        let {code,data} = await this.$Http.getMenu();
        if(code){
            data.forEach(item => {
                if (item.child.length < 1) item.child = null
                item.child && item.child.forEach(row => {
                    if (row.child.length < 1) row.child = null
                })
            })
            this.menuList = data;
            console.log(66, this.menuList)
        }
    },
    // 查询
    select() {
      if (!this.paging.title && !this.paging.name && !this.paging.tel) {
        this.utils.message("查询条件至少输入一项！");
        return false;
      }
      this.GetList();
    },
    async setRow(type, row) {
        if (type == 1) {
            this.utils.goUrl(`/editClassify?title=分类编辑&id=${row.id}`);
        }else{
            this.$msgbox({
                title: '提示',
                message: '确定要删除该分类吗?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose:async (action, instance, done) => {
                    if (action === 'confirm') {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = '执行中...';
                    let {code,data} = await this.$Http.delStoreCate({id:row.id})
                        if(code){
                            this.$message.success('删除成功!');
                            this.handleCurrentChange(1)
                        }
                        done();
                        instance.confirmButtonLoading = false;
                    } else {
                        done();
                    }
                }
            }).then(action => {

            }).catch(()=>{});
        }
    },
    // 获取分类列表
    async GetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getStoreCate(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        console.log(43435,  this.tableData)
        this.paging.limit = data.per_page;
        this.paging.total = data.total;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.GetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.ruleFormInput{
    ::v-deep{
        .el-input{
             width: 300px;
        }
        
    }
}
</style>